<template>
	<div style="display: flex;margin-bottom: 10px;">
		<div style="width: 95%;">
			<el-tabs v-model="currentId" type="card" @tab-remove="removeOneTab">
				<el-tab-pane v-for="(item, index) in tabsData" :label="item.name" :key="item.id" :name="item.id" :url="item.url" :closable="item.closable"></el-tab-pane>
			</el-tabs>
		</div>
		<el-dropdown style=" flex: 1;" @command="handleCommand">
			<el-button>选项</el-button>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="refreshCurrentTab">刷新</el-dropdown-item>
				<el-dropdown-item command="removeOtherTabs">关闭其他</el-dropdown-item>
				<el-dropdown-item command="removeAllTabs">关闭全部</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>

<script>
export default {
	name: 'tab',
	data() {
		return {
			currentId: this.id,
			tabsData: this.items
		};
	},
	props: {
		items: {
			type: Array,
			default() {
				return [];
			}
		},
		id: {
			type: String,
			default() {
				return '';
			}
		},
		tabsLimit: {
			type: Number,
			default() {
				return 20;
			}
		}
	},
	methods: {
		//获取打开的tab
		getCurrentTabId() {
			return this.currentId;
		},
		//根据id获取tab
		getTab(id) {
			let tabs = this.getTabs();
			for (let tab of tabs) {
				if (id == tab.id) {
					return tab;
				}
			}
			return null;
		},
		//获取全部tab
		getTabs() {
			return this.tabsData;
		},
		//添加一个tab
		addTab(item) {
			let flag = false;
			let tabs = this.getTabs();
			for (let tab of tabs) {
				if (item.id == tab.id) {
					this.currentId = item.id;
					flag = true;
				}
			}
			if (!flag) {
				if (this.getTabs().length >= this.tabsLimit) {
					return false;
				}
				this.tabsData.push(item);
				this.currentId = item.id;
			}
			return true;
		},
		//删除指定tab
		removeOneTab(id) {
			let tabs = this.getTabs();
			if (this.currentId == id) {
				this.currentId = '';
				tabs.forEach((tab, index) => {
					if (tab.id == id) {
						let nextTab = tabs[index + 1] || tabs[index - 1];
						if (nextTab) {
							this.currentId = nextTab.id;
						}
					}
				});
			}
			tabs.forEach((tab, index) => {
				if (tab.id == id && tab.closable) {
					this.tabsData.splice(index, 1);
				}
			});
			this.$emit('removeTab', id);
		},
		//删除其他tab
		removeOtherTabs() {
			let activeTab = this.getCurrentTabId();
			let tabs = Array.from(this.getTabs());
			tabs.forEach((tab, index) => {
				if (tab.id != activeTab) {
					this.removeOneTab(tab.id);
				}
			});
		},
		//删除全部tab
		removeAllTabs() {
			let activeTab = this.getCurrentTabId();
			this.removeOtherTabs();
			this.removeOneTab(activeTab);
		},
		//右侧选项操作
		handleCommand(command) {
			if (command == 'removeOtherTabs') {
				this.removeOtherTabs();
			} else if (command == 'removeAllTabs') {
				this.removeAllTabs();
			} else if (command == 'refreshCurrentTab') {
				// window.location.reload();
				this.$emit("refresh");
			}
		},
		init() {
			this.tabsData = this.items;
			if (!this.tabsData) {
				this.tabsData = new Array();
			}
		},
		mounted() {
			this.init();
		}
	},
	watch: {
		items(val) {
			this.init();
		},
		id(val) {
			this.currentId = val;
		},
		currentId(val) {
			this.$emit('tabChange', val);
		}
	},
	mounted() {
		this.init();
	}
};
</script>

<style></style>
